<template>
	<div>
		<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
			
			<van-row>
			  <van-col span="1"></van-col>
			  <van-col span="22">
				  <van-row type="flex" justify="space-between">
					  <van-col span="5">
						  
						  <van-sidebar :active-key="activeKey" @change="onChange" >
						  	<van-sidebar-item title="热点" />
						  	<van-sidebar-item title="热点" />
						  	<van-sidebar-item title="热点" />
						  	<van-sidebar-item title="热点" />
						  	<van-sidebar-item title="热点" />
						  	<van-sidebar-item title="热点" />
						  	<van-sidebar-item title="热点" />
						  	<van-sidebar-item title="热点" />
						  </van-sidebar>
						  
					  </van-col>
					 
					  <van-col span="18">
						
						 <van-tag round type="danger" size="large" plain text-color='#101010'  v-for="item in arr" id="tag" :key="index">{{item.caipin}}</van-tag>
					  </van-col>
					</van-row>
				  
			  </van-col>
			  <van-col span="1"></van-col>
			</van-row>
			
			
			
			
			
			
			
			
			
			
			
			
		
		
		
		</van-pull-refresh>	
		
	</div>

</template>

<script>
	import Mock from 'mockjs'
	import axios from 'axios'
	
	
	
	export default {
		name: 'Caipu',
		data() {
				return {
					activeKey: 0,
					valu:'搜索菜谱',
					arr:[],
					isLoading: false,
					index:''
				};
			},
				methods: {
						onChange(key) {
							console.log(key)
							this.activeKey = key;
						},
						 onRefresh() {
			     setTimeout(() => {
			       this.$toast('刷新成功');
			       this.isLoading = false;
							var Random=Mock.Random
							Random.extend({
								caipin:function(res){
									var constellations=['潮州菜','东北菜','本帮菜','赣菜','楚菜','京菜','津菜','冀菜','豫菜',
									'鲁菜','川菜','粤菜','苏菜','闽菜','浙菜','湘菜','徽菜'
										]
									return this.pick(constellations)
								}
								
							})
							
							var user = Mock.mock({
								'list|15':[{
									'pid|+1':'0',
									caipin:'@caipin'
								}]
							})
							
							Mock.mock('http://jx.xuzhixiang.top/ap/api/productlist.php',user)
							
							let that = this
							axios({
								url:'http://jx.xuzhixiang.top/ap/api/productlist.php'
							
							}).then((res)=>{
								console.log(res.data.list)
								that.arr=res.data.list
							})
			      
			     }, 500);
			   }
						
					},
			mounted(){
					this.$emit('parend',this.valu)
					
					axios({
						url:'http://jx.xuzhixiang.top/ap/api/productlist.php'
					
					}).then((res)=>{
						console.log(res.data.list)
						this.arr=res.data.list
					})
					// axios({
					// 	url:'http://192.168.114.1:8080/findAllFoodMenu.do',
					// 	method:"post",
					// 	data:{}
					// }).then((res)=>{
					// 	console.log(res)
					// 	console.log(res.data.data)
					// 	this.arr=res.data.data
					// })
				},
				
				
	}
	
	
	
	
	
	
	
	
	
	
	//  export default {
	// 	name: 'Caipu',
	// 	data() {
	// 		return {
	// 			activeKey: 0,
	// 			valu:'搜索菜谱',
	// 			arr:[],
	// 			isLoading: false,
	// 			index:''
	// 		};
	// 	},
	// 	methods: {
	// 		onChange(key) {
	// 			console.log(key)
	// 			this.activeKey = key;
	// 		},
	// 		 onRefresh() {
 //      setTimeout(() => {
 //        this.$toast('刷新成功');
 //        this.isLoading = false;
	// 			var Random=Mock.Random
	// 			Random.extend({
	// 				caipin:function(res){
	// 					var constellations=['潮州菜','东北菜','本帮菜','赣菜','楚菜','京菜','津菜','冀菜','豫菜',
	// 					'鲁菜','川菜','粤菜','苏菜','闽菜','浙菜','湘菜','徽菜'
	// 						]
	// 					return this.pick(constellations)
	// 				}
	// 				
	// 			})
	// 			
	// 			var user = Mock.mock({
	// 				'list|15':[{
	// 					'pid|+1':'0',
	// 					caipin:'@caipin'
	// 				}]
	// 			})
	// 			
	// 			Mock.mock('http://jx.xuzhixiang.top/ap/api/productlist.php',user)
	// 			
	// 			let that = this
	// 			axios({
	// 				url:'http://jx.xuzhixiang.top/ap/api/productlist.php'
	// 			
	// 			}).then((res)=>{
	// 				console.log(res.data.list)
	// 				that.arr=res.data.list
	// 			})
 //       
 //      }, 500);
 //    }
	// 		
	// 	},
	// 	mounted(){
	// 		this.$emit('parend',this.valu)
	// 		var that =this
	// 		axios({
	// 			url:'http://jx.xuzhixiang.top/ap/api/productlist.php'
	// 		
	// 		}).then((res)=>{
	// 			// console.log(res.data.list)
	// 			that.arr=res.data.list
	// 		})
	// 	},
	// 	
	// }
</script>

<style>
	
	
	#tag{
		margin:30px 10px 0px 10px;
		height:20px;width:50px;display:inline-block;
		text-align:center
		
	} 
	
</style>
